
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	
	
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

<ui:composition template="/templates/photoTemplate.xhtml">

	<ui:define name="title">
		#{i18N.getTrans('ReservationAndAvailability')}	
		</ui:define>

	<ui:define name="navReferences">
	</ui:define>

	<ui:define name="body">

		<script>
		$(function() {
			$(document).tooltip({
			track: true
			});

			// Remove the footer. Not needed here.
			$( "#footer" ).fadeOut(2000, function() {
				// Animation complete
			});

		});
		</script>
		<h1><h:outputText value="${i18N.getTrans('ReservationAndAvailability')}" escape="false" /></h1>

		<div id="calendarHead">

			<div id="loadingDiv"></div>

			<div id="resInfoDiv">
				<h:form id="reservationForm">
				
					<h2>#{i18N.getTrans('ReservationInfo')}</h2>
					<table id="resInfoTable">
						<tr>
							<td>#{i18N.getTrans('TimePeriod')}<h:inputHidden id="startDate"
									value="#{reservationController.startDateString}" /></td>
							<td id="resInfoTdStartDate" style="width: 50%"></td>
						</tr>
						<tr>
							<td><h:inputHidden id="endDate"
									value="#{reservationController.endDateString}" /></td>
							<td id="resInfoTdEndDate"></td>
						</tr>
						<tr>
							<td>#{i18N.getTrans('Days/Nights')}</td>
							<td id="resInfoTdDays"></td>
						</tr>
						<tr>
							<td>#{i18N.getTrans('Guests')}<h:inputHidden id="numberOfGuests"
									value="#{reservationController.numberOfGuests}" /></td>
							<td id="resInfoTdGuests"></td>
						</tr>
						<tr>
							<td>#{i18N.getTrans('SeasonFactor')}</td>
							<td id="resInfoTdSeasonFactor"></td>
						</tr>
						<tr>
							<td colspan="2">&nbsp;</td>
						</tr>
						<tr>
							<td>#{i18N.getTrans('RentCosts')}</td>
							<td id="resInfoTdVacCosts"></td>
						</tr>
						<tr>
							<td>#{i18N.getTrans('CleaningFee')}</td>
							<td id="resInfoTdCleaningFee"></td>
						</tr>
						<tr>
							<td id="resInfoTdVatPercentage">#{i18N.getTrans('Tax')}</td>
							<td id="resInfoTdVat"></td>
						</tr>
						<tr>
							<td class="resInfoTdTotal">#{i18N.getTrans('TotalCosts')}</td>
							<td class="resInfoTdTotal" id="resInfoTdTotalCosts"></td>
						</tr>
						<tr>
							<td id="resInfoTdLoading"></td>
							<td id="resInfoTdOtherInfo" class="animate-flicker"></td>
						</tr>
						<tr>
							<td colspan="2">&nbsp;</td>
						</tr>
						<!-- <tr><td>Week Day Factor</td><td id="resInfoTdWeekDayFactor"></td></tr> -->
						<tr>
							<td colspan="2"><h:commandButton id="resButton"
									action="#{reservationController.requestReservationPage}"
									value="#{i18N.getTrans('btn:bookReservation')}" /></td>
						</tr>
						<tr>
							<td colspan="2"><h:message id="msgStartDate" for="startDate"
									style="color:red" /> <h:message id="msgEndDate" for="endDate"
									style="color:red" /></td>
						</tr>
					</table>
				</h:form>
			</div>

		</div>

		<div id="dialog-confirm" title="Cuánto huéspedes?"
			style="display: none;">
			<p>#{i18N.getTrans('PleaseProvideNumberOfGuests.Max6')}</p>
			<input id="spinner" name="value" value="2"
				style="width: 70px; height: 50px; font-size: 40px;" /> <span
				style="font-size: 3em; padding: 20px 20px 20px 20px;">#{i18N.getTrans('guests')}</span>
		</div>

		<div id="dateIssueDialog" title="Fechas no aceptado!"
			style="display: none;">
			<p>#{i18N.getTrans('MakeSureBeginDateIsNoOlderThanEndDate')}</p>
		</div>

		<div id="dateNotVacantDialog" title="Fechas no aceptado!"
			style="display: none;">
			<p>#{i18N.getTrans('MakeSureYourReservationDoesNotOverlapAnother')}</p>
		</div>

		<div id="dateToCloseToBookedDialog" title="Fechas no aceptado!"
			style="display: none;">
			<p>#{i18N.getTrans('DoNotSelectADateTooCloseToAnotherDate')}</p>
		</div>

		<div id="calendarDiv"></div>

		<h:outputScript name="js/reservationCalendar.js" />

	</ui:define>
</ui:composition>
</html>
